<template>
    <el-form
        :model="formData"
        :rules="rules"
        ref="ruleForm"
        :disabled="btnDisabled"
        label-width="100px">
        <el-form-item label="昵称" prop="nickname">
            <el-input v-model.trim="formData.nickname" clearable placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="relname">
            <el-input v-model.trim="formData.relname" clearable placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
            <el-input-number 
                v-model="formData.age"
                controls
                control-position="right"
                :min="0"
                :max="1000"
                :step="1"
                step-strictly>
            </el-input-number>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-select 
                v-model="formData.sex" 
                clearable
                filterable
                style="width: 100%"
                placeholder="请选择性别">
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
            <el-input v-model.trim="formData.phone" clearable placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model.trim="formData.email" clearable placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="自我介绍" prop="introduction">
            <el-input 
                v-model="formData.introduction" 
                type="textarea"
                maxlength="150"
                show-word-limit
                :rows="3" 
                placehilder="请输入自我介绍">
            </el-input>
        </el-form-item>
    </el-form>
    <div class="user-dialog-footer">
        <el-button type="primary" :loading="saveLoading" :disabled="btnDisabled" @click="handleConfirm">确 认</el-button>
        <el-button type="primary" plain :disabled="btnDisabled" @click="handleClose">取 消</el-button>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps, watch, computed, defineEmits } from 'vue'
import { addUser,getUserDetailById,modifyUserInfoById } from '../../../api/user'
import { ElMessage } from 'element-plus'
const props = defineProps({
    id: {
        type: [String, Number],
        default: ''
    }
})

let emits = defineEmits(['back'])

let saveLoading = ref(false)
let loading = ref(false)
let ruleForm = ref(null)

let options1 = ref([
    {
        value:0,
        label:'暂不清楚'
    },
    {
        value:1,
        label:'女'
    },
    {
        value:2,
        label:'男'
    }
])
let btnDisabled = computed(() => {
    return saveLoading.value || loading.value
})
let formData:any = ref({
    name: '',
    nickname: '',
    relname: '',
    age: '',
    sex: '',
    phone: '',
    // maritalStatus: '',
    introduction: '',
    email:''
})
let rules = ref({
    name: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
    nickname: [{ required: true, message: '请填写昵称', trigger: 'blur' }],
    relname: [{ required: false, message: '请填写真实姓名', trigger: 'blur' }],
    phone: [{ required: false, validator: (rule: Object, value: String, callback: Function) => {
        console.log('rule: ', rule);
        if (!value) {
            return callback()
        }
        const reg = new RegExp(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/)
        //@ts-ignore 
        if (reg.test(value)) {
            return callback()
        }
        return callback('请输入正确格式的电话号码')
    }, trigger: 'blur' }],
    email: [{ required: false, validator: (rule: Object, value: string, callback: Function) => {
        console.log('rule: ', rule);
        if (!value) {
            return callback()
        }
        const reg = new RegExp(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/) 
        if (reg.test(value)) {
            return callback()
        }
        return callback('请输入正确格式的邮箱')
    }, trigger: 'blur' }]
})
//@ts-ignore
watch(() => props.id, async(val: [Number, String] ) => {
    if (val) {
        // 编辑时获取数据
        const result = await getUserDetailById({
            user_id:val
        })
        formData.value.nickname = result.data.nickname
        formData.value.relname = result.data.realname
        formData.value.age = result.data.age
        formData.value.sex = result.data.gender
        formData.value.phone = result.data.phone
        formData.value.introduction = result.data.introduction
        formData.value.email = result.data.email

    }
}, {
    immediate: true,
    deep: true
})

const handleConfirm = () => {
    //@ts-ignore
    ruleForm.value.validate(async(valid: Boolean) => {
        if (valid) {
            // 保存接口
            if(!props.id){//id不存在是新增
                const result = await addUser({
                    role:0,
                    nickname:formData.value.nickname,
                    realname:formData.value.relname,
                    age:formData.value.age,
                    gender:formData.value.sex,
                    phone:formData.value.phone,
                    email:formData.value.email,
                    introduction:formData.value.introduction,
                    create_time:new Date()
                })
                //@ts-ignore
                if(result.code == 1){
                    // 关闭当前弹窗并刷新列表
                    emits('back', true)
                    ElMessage({
                        message: '添加成功',
                        type: 'success',
                    })
                }
            }else if(props.id){
                const result = await modifyUserInfoById({
                    user_id:props.id,
                    role:0,
                    nickname:formData.value.nickname,
                    realname:formData.value.relname,
                    age:formData.value.age,
                    gender:formData.value.sex,
                    phone:formData.value.phone,
                    email:formData.value.email,
                    introduction:formData.value.introduction,
                })
                //@ts-ignore
                if(result.code == 1){
                    // 关闭当前弹窗并刷新列表
                    emits('back', true)
                    ElMessage({
                        message: '修改成功',
                        type: 'success',
                    })
                }
            }
            
            
        }
    })
}

const handleClose = () => {
    emits('back', false)
}
</script>


<style lang="less" scoped>
.el-form {
    padding: 16px 16px 0 16px;
}
.user-dialog-footer {
    padding: 0 16px 16px;
    text-align: right;
}
</style>